<template>
    <div v-for="(node,index) in json_data.nodes" :key="node.name">
      <div class="div_attr_main"  v-if="index%2 == 1" style="position:relative;width:100%;height:100%;margin-bottom:20px;">
      
      <div class="class_attr">
          {{ node.name }}
      </div>
      
      <div style="float:right;width:90%;">

            <div v-for="node_l2 in node.nodes" :key="node_l2.name" style="margin-bottom:20px;">
            <div>
            <div style="max-width:99%;" class="class_attr_l2_right">
                {{ node_l2.name }}
            </div>
            <div style="width:99%;" class="class_attr_l2_same">

                
                    <div style="float:left;width:25%;" class="class_attr_l2"  v-for="node_data in node_l2.nodes" :key="node_data.name" >
                    <a :href="'/search?name=' + node_data.name + '&code=' + node_data.code + '&type=' + node_data.type">{{ node_data.name }}</a>
                    </div>
                    <div style="clear:both"></div>
                

                
            </div>
            <div style="clear:both"></div>
            </div>
            </div>

      </div>

      <div class="right_bracket_container" style="width:30px;float:right;">
            <div class="bracket_container">
              <div class="bracket_left_edge"></div>
              <div class="right_bracket_line_container">
                  <div class="bracket_line"></div>
              </div>
              
            </div>
        </div>
      
      <div style="clear:both"></div>
      </div>
    </div>
    
</template>

<script>
export default 
{
    name: 'RightAttr',
    components: {
    },
    props: {
      json_data: {
        type: Object,
        default: () => {}
      }
    },
    data () {
      return {
        json_data_l2: {
            name: '',
            link: '',
            pic: '',
            nodes: [],
        }
      };
    },
}

</script>

<style scoped>

.container {
    display:flex;
    justify-content:center;/*主轴上居中*/
    align-items:center;/*侧轴上居中*/
}



.class_attr_l2_right {
   border:1px solid rgb(175, 175, 211);
  border-radius: 6px;
  height: 26px;
  line-height: 26px;
  font-size: 14px;
  background-color: rgb(191, 201, 219);
  margin-bottom:0px;
  margin-top:0px;
}

.class_attr_l2 {
  font-family: Avenir, Helvetica, Arial, sans-serif;

}


.class_attr_l2_same {
  border:1px solid rgb(175, 175, 211);
  border-radius: 6px;
  height: auto;
  line-height: 20px;
  font-size: 12px;
  background-color: rgb(191, 201, 219);
  font-family: Avenir, Helvetica, Arial, sans-serif;
}

.div_attr_main {
  position:absolute;
}

.right_bracket_container {
  width:100%;
  height:100%;
  padding-top:5px;
  padding-bottom:5px;
  height:100%;
  position:absolute;
  top:0;
  right:90%;
  bottom:0;
}

.bracket_container {
  height:100%;
  width:100%;
  margin:0px;
  padding:0px;
}

.left_bracket_line_container {
  width:16px;
  height:100%;
  position:relative;
  float:left;
}

.right_bracket_line_container {
  width:16px;
  height:100%;
  position:relative;
  float:right;
}

.bracket_line {
  width:12px;
  border-top:1px solid black;
  height:0px;
  text-align:center;
  margin: auto;
  position:absolute;
  left: 0;
  top: 0;
  bottom:0;
  right: 0;
}
.bracket_left_edge {
  width:10px;
  height:100%;
  line-height:100%;
  text-align:center;
  border-left:1px solid black;
  border-top:1px solid black;
  border-bottom:1px solid black;
  float:right;
}


.class_attr {
  border:2px solid rgb(175, 175, 211);
  border-radius: 6px;
  width: 6%;
  height:20px;
  font-size: 12px;
  background-color: rgb(191, 201, 219);
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align:center;
  color: #2c3e50;
  line-height:20px;
  position:absolute;
  margin: auto;
  left: 0;
  top: 0;
  bottom:0;
  word-break:break-all;
}

</style>
